// 注册全局指令的 - 插件
import Vue from 'vue'
// Vue.use()=>>>>给Vue注册插件

// 思路:给Vue.use传入一个对象(必须有install方法)

export default {
  install () {
    Vue.directive('focus', {
      inserted (el) { // 指令所在标签,被插入到真实dom上才执行
        // el就是指令所在的原生标签
        // 问题:el.focus()=>>>无效
        // 原因:v-focus绑定在了van-search组件身上(el标签实际上是一个div)
        // 解决:原生的方式,往里找到input标签名
        //  el.querySelector('input').focus()

        // 问题只能给某个标签下的input添加事件
        // 解决:判断el的值
        // 指令想通用必须判断
        let isFind = false // 没找到

        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
        //   el本身就是input和textarea直接调用focus聚焦
          el.focus()
          isFind = true
        } else {
          // el本身不是,尝试往里获取
          const inp = el.querySelector('input')
          const ta = el.querySelector('textarea')
          // inp不是null才能往后执行
          if (inp && inp.nodeName === 'INPUT') {
            inp.focus()
            isFind = true
          } if (ta && ta.nodeName === 'TEXTAREA') {
            ta.focus()
            isFind = true
          }
        }
        // 兜底判断
        if (isFind === false) {
        //   证明这个指令可能绑定在了非input和textarea身上
          throw new Error('不要玩弄老子,把事件绑在输入框上')
        }
      },
      update (el) { // 指令所在标签, 更新时(隐藏/显示css方式), 执行这个方法
        f(el)
      }
    })
  }

}

function f (el) {
  let isFind = false // 没找到

  if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
    //   el本身就是input和textarea直接调用focus聚焦
    el.focus()
    isFind = true
  } else {
    // el本身不是,尝试往里获取
    const inp = el.querySelector('input')
    const ta = el.querySelector('textarea')
    // inp不是null才能往后执行
    if (inp && inp.nodeName === 'INPUT') {
      inp.focus()
      isFind = true
    } if (ta && ta.nodeName === 'TEXTAREA') {
      ta.focus()
      isFind = true
    }
  }
  // 兜底判断
  if (isFind === false) {
    //   证明这个指令可能绑定在了非input和textarea身上
    throw new Error('不要玩弄老子,把事件绑在输入框上')
  }
}
